<template>
  <div class="box">
    <div id="mynetwork" class="myChart"></div>
  </div>
</template>

<script>
  require("vis-network/dist/dist/vis-network.min.css");
  const vis = require("vis-network/dist/vis-network.min");
  import iconA from './image/iconA.png'
  import iconB from './image/iconB.png'
  export default {
    data() {
      return {}
    },
    mounted() {
      this.makeVis();
    },
    methods: {
      makeVis() {
        var that = this;
        let edges = [{
          id: 1,
          from: 1,
          to: 2,
          color: 'red'
        }, {
          id: 2,
          from: 3,
          to: 2,
          color: {
            color: 'red',
            highlight: 'blue'
          }
        }, {
          id: 3,
          from: 1,
          to: 3
        }, {
          id: 4,
          from: 1,
          to: 3,
          smooth: {
            type: "discrete",
          }
        }];
        let nodes = [{
          id: 1,
          x: 10,
          y: 10,
          label: '1',
          image: iconA
        }, {
          id: 2,
          x: 50,
          y: 90,
          label: '2',
          image: iconA
        }, {
          id: 3,
          x: 30,
          y: 80,
          label: '3',
          image: iconB
        }, {
          id: 4,
          x: 80,
          y: 90,
          label: '4',
          image: iconB
        }];

        var data = {
          nodes: nodes,
          edges: edges,
        };
        var container = document.getElementById("mynetwork");
        var options = {
          nodes: {
            font: {
              color: "#000", // 字体的颜色
              size: 16, // 显示字体大小
            },
            scaling: {
              min: 0,
              max: 0, // 缩放效果比例
              label: {
                enabled: true,
                min: 8,
                max: 8,
                maxVisible: 0,
              },
            },
            borderWidth: 1,
            color: {
              border: "white",
            },
            shape: "image",
            brokenImage: iconB,
            shapeProperties: {
              interpolation: true,
            },
            size: 13,
          },
          groups: {
            ws: {
              // 系统定义的形状 dot等 这些官网都可以找到
              shape: "dot",
              color: "white",
            },
          },
          layout: {
            // randomSeed: 1, // 配置每次生成的节点位置都一样，参数为数字1、2等
            improvedLayout: false,
            hierarchical: false,
          },
          physics: {
            barnesHut: {
              gravitationalConstant: 0,
              springConstant: 0,
              springLength: 0,
            },
          },
          interaction: {
            hover: true, // 鼠标移过后加粗该节点和连接线
            selectConnectedEdges: true, // 选择节点后是否显示连接线
            hoverConnectedEdges: false, // 鼠标滑动节点后是否显示连接线
            tooltipDelay: 200,
            zoomView: true, // 是否能缩放画布
          },
          edges: {
            color: {
              color: "#000",
              highlight: "#000",
              hover: "#000",
              inherit: "from",
              opacity: 1,
            },
            font: {
              color: "#000",
              size: 1,
            },
            scaling: {
              min: 20,
              max: 20,
            },
            arrowStrikethrough: true,
            selfReferenceSize: 3,
            hoverWidth: 0.3,
            shadow: false,
            smooth: {
              enabled: true,
              type: "dynamic",
              roundness: 0.5,
            },
          },
        };
        that.network = new vis.Network(container, data, options);
      },
    }
  }
  //
</script>

<style>
  .box {
    width: 100%;
    height: 100%;
  }

  .myChart {
    width: 100%;
    height: 100%;
  }
</style>
